<script setup lang="ts">
defineOptions({
  name: "barCom"
});
import { ref, onMounted, computed, nextTick } from "vue";
import echartsCom from "../echartsCom/index.vue";
import type { LabelLayoutFunctionType } from "@/views/common/components/types";

interface Props {
  /**  获取当前echarts实例对象，参数为实例对象和回调函数 */
  // getEchartsInstance?: EchartsInstanceType | null;
  /**  获取 optiins 配置函数 */
  labelLayoutFn?: LabelLayoutFunctionType | null;
  /**  同 echarts option */
  options?: CommonEcharts.CommonEchartsOption | null;
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  title 栏右侧文字 */
  rightText?: string | number;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  width: 330,
  height: 360,
  boxShadow: false,
  borderRidus: false
});

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
}

const emits = defineEmits<Emits>();

const echartsKey = ref<string>(Math.random().toString(36).slice(2, 10));
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);

const title_height = computed(() => (props.title ? "38px" : "0px"));
const min_width = computed(() => `${props.width}px`);

const clickHandler = () => emits("btn-click");

// const updateEchartsKey = () => {
//   emitter.on("viceMenuChange", () => {
//     echartsKey.value = Math.random().toString(36).slice(2, 10);
//   });
// };

type itemStyleType = {
  [key: string]: string;
};

interface dataType {
  name: string;
  value: number;
  itemStyle?: itemStyleType;
}

// const isWater = ref(false);
// const routerStore = useRouterStoreHook();

const getEcharts = async () => {
  await nextTick();
  return echartsComRef.value.getEcharts();
};

defineExpose({
  getEcharts,
  el: echartsComRef
});
</script>

<template>
  <div class="echarts-chart" :class="{ boxShadow, borderRidus }">
    <div class="echarts-chart-com">
      <echartsCom ref="echartsComRef" :key="echartsKey" :labelLayoutFn="labelLayoutFn" :options="options" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.echarts-chart {
  box-sizing: border-box;
  width: 100%;
  min-width: v-bind(min_width);
  height: 100%;
  background-color: #fff;

  .model-title-slot {
    display: flex;
    gap: 16px;
    align-items: center;

    .right-text {
      font-weight: 600;
      line-height: 1;
      color: var(--px-color-primary);
    }
  }

  .echarts-chart-com {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.borderRidus {
  border-radius: 4px;
}
</style>
